<template>
  <div class="virtual-list-container">
    <div v-for="item in showData" :key="item.id" class="virtual-list-item">
      <img :src="item.avatar" alt="avatar" class="avatar" />
      <div>{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

type Item = {
  id: number
  name: string
  avatar: string
}

const props = defineProps<{
  showData: Item[]
}>()
</script>

<style scoped>
.virtual-list-container {
  display: flex;
  flex-direction: column;
}

.virtual-list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%;
}
</style>
